html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,del,dfn,em,img,ins,kbd,q,samp,small,strong,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,table,tbody,tfoot,thead,tr,th,td,article,aside,footer,header,nav,section {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0; /*轮廓*/
	font-size: 100%;
	background: transparent  /*背景透明*/
}
ul,li{
    list-style-type: none;
}
html,body {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;/*子元素将保留其 3D位置*/
	backface-visibility: hidden; /*当元素不面向屏幕时隐藏*/
	perspective: 1000;  /*相当于Z轴长度*/
}
#content{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow:hidden;
	position: absolute;
}
	.content_wrap{
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	}
		.content_wrap > li{ /*>表示只选择一代*/
			width: 100%;
			height: 100%;
			float: left;
			background-size: 100% 100%;
			overflow: hidden;
			position: relative;
		}
	.charector{
		width: 151px;
		height: 291px;
		background: url(../img/boy.png) -0px -291px no-repeat;
		position: absolute;
		left: -6%;
		top: 55%;
		transform: translateX(0px);
		backface-visibility: hidden;
		perspective: 1000;		
	}
	.slowWalk{
		animation: person-slow 950ms infinite;
		animation-timing-function:steps(1,start);
	}
	@keyframes person-slow{
		0%{
			background-position: -0px -291px;
		}
	    25% {
	        background-position: -602px -0px;
	    }
	    50% {
	        background-position: -302px -291px;
	    }
	    75% {
	        background-position: -151px -291px;
	    }
	    100% {
	        background-position: -0px -291px;
	    }
	
	}
	.pauseWalk{
		animation-play-state: paused;
	}
	.slowFlowerWalk{
		animation: person-flower-slow 950ms infinite step-start;
	}
		@keyframes person-flower-slow{
	       0% {
	           background-position: -453px -0px;
	       }
	       25% {
	           background-position: -904px -0px;
	       }
	       50% {
	           background-position: -451px -0px;
	       }
	       75% {
	           background-position: -753px -0px;
	       }
	       100% {
	           background-position: -300px -0px;
	       }
		}
   .boyOriginal {
     background-position: -150px -0px;
    }
	.boy-rotate {
	       animation: boy-rotate 850ms 1 step-start forwards;
	   }
	   
	   @keyframes boy-rotate {
	       0% {
	           background-position: -603px -291px;
	       }
	       16.7% {
	           background-position: -150px -0px;
	       }
	       33.4% {
	           background-position: -453px -291px;
	       }
	       50.1% {
	           background-position: -0px -0px;
	       }
	       66.8% {
	           background-position: -903px -291px;
	       }
	       83.5% {
	           background-position: -753px -291px;
	       }
	       100% {
	           background-position: -603px -291px;
	       }
	   }
/*第一页*/
/*背景图*/
.a_background {
    width: 100%;
    height: 100%;
    position: absolute;
}

.a_background_top{
    width: 100%;
    height: 71.6%;
    background-image:url(../img/a_background_top.png);
    background-size: 100% 100%;
}


.a_background_middle{
    width: 100%;
    height: 13.1%;
    background-image: url(../img/a_background_middle.png);
    background-size: 100% 100%;
}

.a_background_botton{
    width: 100%;
    height: 15.3%;
    background-image:url(../img/a_background_botton.png);
    background-size: 100% 100%;
}
	#sun {
	    background: url(../img/sun.png) no-repeat;
	    position: absolute;
	    z-index: 1;
	    top: -30px;
	    height: 201px;
	    width: 201px;
	    right: 40%;
		transform: rotate(45deg) ;
		animation: rotation 60s 1 forwards;
	}
	@keyframes rotation{
		0% {
		    transform: translateX(0) translateY(0);
		}
		100% {
		    transform: translateX(-2000px) translateY(400px);
		}
	}   
    .cloud{
        z-index: 2;
        position: absolute;
    }
    
    .cloud1 {
        width: 181px;
        height: 101px;
        left: -5%;
        top: 15%;
        background: url(../img/cloud1.png);
    }
    

    .cloud2 {
        width: 301px;
        height: 140px;
        right: -5%;
        background: url(../img/cloud2.png);
    }
    .cloud1Anim{
        animation: smallCloud 30s infinite;
    }
    
    .cloud2Anim{
        animation: largeCloud 60s infinite;
    }
    @keyframes smallCloud{
		0% {
		    left: -5%;
		}
		100% {
		    left: 100%;
		}
    }
    @keyframes largeCloud{
		0% {
		    left: -5%;
		}
		100% {
		    left: 100%;
		}
    }
/*第二页*/
/*背景图*/
.b_background {
   	width:100%;
    height: 100%;
    background-image: url(../img/b_background.png);
    background-size: 100% 100%;
    position: absolute;
}

.b_background_preload {
    background: url(../img/b_background_preload.png) no-repeat -9999px -9999px;
}

.lamp-bright {
   background-image: url(../img/b_background_preload.png);
}


/*商店*/

.shop {
    width: 39.5%;
    height: 35.5%;
    position: absolute;
    left: 29%;
    top: 36.5%;
}

.door {
    position: absolute;
    width: 32%;
    height: 100%;
    top: 32%;
    height: 68%;
    overflow: hidden;
    left: 58.5%;
}

.door-left,
.door-right {
    width: 50%;
    height: 100%;
    position: absolute;
}

.door-left {
    left: 0%;
    background: url(../img/door-left.png);
    background-size: 100% 100%;
}

.door-right {
    left: 50%;
    background: url(../img/door-right.png);
    background-size: 100% 100%;
}
.bird {
    min-width: 91px;
    min-height: 71px;
    top: 10%;
    position: absolute;
    z-index: 10;
    right: -91px;
    background: url(../img/bird.png) -182px 0px no-repeat;
}
.birdFly {
	animation: bird-slow 400ms infinite step-start;
}
@keyframes bird-slow{
	0% {
	    background-position: -182px 0px;
	}
	50% {
	    background-position: 0px 0px;
	}
	75% {
	    background-position: -91px 0px;
	}
	100% {
	    background-position: -182px 0px;
	}
}
/*第三页*/
/*背景图*/

.c_background {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    position: absolute;
}

.c_background_top{
    width: 100%;
    height: 71.6%;
    background-image: url(../img/c_background_top.png);
    background-size: 100% 100%;
}


.c_background_middle{
    width: 100%;
    height: 13.1%;
    background-image: url(../img/c_background_middle.png);
    background-size: 100% 100%;
}

.c_background_botton{
    width: 100%;
    height: 15.3%;
    background-image: url(../img/c_background_botton.png);
    background-size: 100% 100%;
}

/*小女孩*/

.girl {
    background: url(../img/girl.png) -755px -0px no-repeat;
    position: absolute;
    right: 40%;
    top: 37%;
    width: 151px;
    height: 291px;
}
.girl-rotate {
    animation: girl-rotate 850ms 1 step-start;
    animation-fill-mode: forwards; /*规定动画播放前后是否可见*/
}
@keyframes girl-rotate {
    0% {
        background-position: -604px -0px;
    }
    16.7% {
        background-position: -151px -0px;
    }
    33.4% {
        background-position: -906px -0px;
    }
    50.1% {
        background-position: -0px -0px;
    }
    66.8% {
        background-position: -302px -0px;
    }
    83.5% {
        background-position: -453px -0px;
    }
    100% {
        background-position: -604px -0px;
    }
}

/*桥*/

.bridge-bottom {
    position: absolute;
    width: 41%;
    height: 24%;
    left: 29.5%;
    top: 76%;
    overflow: hidden;
}
/*波浪水布局*/

.water {
    width: 100%;
    height: 100%;
}

.water_1,
.water_2,
.water_3,
.water_4 {
    width: 100%;
    position: absolute;
    height: 50%;
    animation: shake 40s linear infinite alternate;
}
@keyframes shake{
	0%,100%{
		transform: translate3d(0,0,0);
	}
	10%,30%,50%,70%,90%{
		transform: translate3d(-30px,0px,0);
	}
	20%,40%,60%,80%{
		transform: translate3d(30px,0px,0);	
	}
}
.water_1 {
    width: 131px;
    height: 15px;
    top: 13%;
    left: 35%;
    background: url() -261px -0px no-repeat;
}

.water_2 {
    width: 161px;
    height: 9px;
    top: 30%;
    left: 45%;
    background: url(../img/water_1.png) -693px -0px no-repeat;
}

.water_3 {
    width: 261px;
    height: 29px;
    top: 50%;
    left: 15%;
    background: url(../img/water_1.png) -0px -0px no-repeat;
}

.water_4 {
    width: 301px;
    height: 12px;
    top: 75%;
    left: 30%;
    background: url(../img/water_1.png) -392px -0px no-repeat;
}



/*星星*/

.stars {
    width: 100%;
    height: 100%;
    position: absolute;
}

.stars > li {
    position: absolute;
    width: 30px;
    height: 31px;
    background-image: url(../img/stars.png);
    animation: flash 5s ease-in-out infinite alternate ;
}

.stars1 {
    top: 20%;
    left: 30%;
}

.stars2 {
    top: 15%;
    left: 20%;
}

.stars3 {
    top: 25%;
    left: 85%;
}

.stars4 {
    top: 30%;
    left: 70%;
}

.stars5 {
    top: 25%;
    left: 20%;
}

.stars6 {
    top: 10%;
    left: 65%;
}
@keyframes flash{
	0%,50%,100%{
		opacity: 1;
	}
	25%,75%{
		opacity: 0;
	}
}
/*logo图标*/
.logo {
    width: 240px;
    height: 127px;
    background-image: url(../img/logo.png);
    z-index: 99;
    position: absolute;
    left: 50%;
    margin-left: -92.5px;
    top: 20px;
    display: none;
}
.logolightSpeedIn {
    display: block;
    animation: lightSpeedIn 1s ease-out ;
}
@keyframes lightSpeedIn{
    0% {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
    60% {
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        transform: skewX(-5deg);
        opacity: 1;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}
/*雪花飘落*/
	#snowflake {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

	.snowRoll {
		width: 41px;
		height: 41px;
	    position: absolute;
	    opacity: 0;
	    z-index: 999;
	    top: -41px;
	    background-size: cover;
	   	animation: mysnow 20s;
	}
	
	@keyframes mysnow {
	    0% {
	        bottom: 100%;
	    }
	    50% {
	        transform: rotate(1080deg);
	    }
	    100% {
	        transform: rotate(0deg) translate3d(50px, 50px, 50px);
	    }
	}